<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>倒计时</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
       
        
        <script src="vue.min.js"></script>
        <script src="vue-resource.min.js"></script>
        <style>
            .v2{
                display: grid !important;
                grid-template-columns: repeat(7,auto) !important;
                
/*                line-height: 200px;*/
            }
            html,body{
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp", sans-serif;
                font-weight: bold;
                font-size: 50px;
                line-height: 26px;
                text-align: center;
                width: 100%;
                height: 100%;
                margin: 0px;
            }
            .vv{
                display: grid !important;
                grid-template-columns: auto 650px auto !important;
               
            }
            .vvv{
                display: grid !important; grid-template-rows: auto 200px auto;height: 100%;
            }
            .v1{
                display: grid;grid-template-columns: auto auto;
            }
            .v-view{
                height: 100%;
            }
            .v4{
                line-height: 71px;height: 60px;border: 1px solid;border-color: #fff;color: #888;
            }
            .vs{
                background: #3774d2;color: #fff;
/*                border-radius: 10px;*/
            }
            .footer,.footer div{
                display: grid;grid-template-rows: auto 50px;height: 100%;font-size: 14px;
            }
            .footer div div{background: #3774d2;height: 50px;line-height: 50px;color: #fff}
        </style>
    </head>
    <body>
    
        <div class="v-view" id="vue_det" >
            <div class="vvv">
                <div>  
                </div>
                <div class="vv">
                    <div></div>
                    <div class="v2">
                        <div class="v1" v-for="(vlist,index) in list" >
                            <div class="v4 vs">{{vlist}}</div>
                            <div class="v4" v-if="index==0">-</div>
                            <div class="v4" v-if="index==1">-</div>
                            <div class="v4" v-if="index==2">&nbsp;</div>
                            <div class="v4" v-if="index==3">:</div>
                            <div class="v4" v-if="index==4">:</div>
                            <div class="v4" v-if="index==5">:</div>
                        </div>
                        <div class="v1">
                            <div class="v4 vs" v-if="mill.ms">{{mill.ms}}</div>
                            <div class="v4 vs" v-else>000</div>
                        </div>
                        <div></div>
                    </div>
                    <div></div>
                </div>
                <div>
                    <div class="footer"><div></div>
                        <div>
                            <div>
                                Copyright (C) 2024-2025 Author ZengZong<472934453@qq.com >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        

        <script>
            var vm = new Vue({
                el: '#vue_det',
                data() {
                    return {
                        list: [],
                        mill: []
                    }
                },
                created(){
                    
                    this.details();
                    this.mills();
                  
                },
                mounted(){
                    
                },
                methods: {
                    details: function() {
                        this.$http.get('http://127.0.0.1:8080/index').then(function(res){
                            // document.write(res.data);   
                            this.list=res.body.date;
                        },function(){
                            console.log('请求失败处理');
                        });
                        setTimeout(this.details,1000);
                        // return  this.site + " - 学的不仅是技术，更是梦想！";
                    },
                    mills: function() {
                        this.$http.get('http://127.0.0.1:8080/request').then(function(res){
                            // document.write(res.data);   
                            this.mill=res.body;
                        },function(){
                            console.log('请求失败处理');
                        });
                        setTimeout(this.mills,1000);
                        // return  this.site + " - 学的不仅是技术，更是梦想！";
                    }
                }
            })
            
        </script>


    </body>
</html>
